<template>
  <a-modal
    destroyOnClose
    title="选择商品"
    :zIndex="zIndex"
    v-model="value"
    :width="900"
    @cancel="onCancel()"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    :bodyStyle="{maxHeight: '70vh', overflow: 'scroll'}"
  >
    <a-card>
      <a-row align="middle" style="margin-bottom: 10px;">
        <a-space class="search-item">
          分类：
          <a-tree-select
            style="width: 200px;"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择分类"
            allow-clear
            tree-default-expand-all
            @change="e => updateParam(e ? e : 0,'cat_id')"
          >
            <a-icon slot="suffixIcon" type="search" />
            <a-tree-select-node
              v-for="(item0) of catList"
              :key="item0.id"
              :value="item0.id"
              :title="item0.name">
              <a-tree-select-node
                v-if="item0.children.length > 0"
                v-for="(item1) of item0.children"
                :key="item1.id"
                :value="item1.id"
                :title="item1.name">
                <a-tree-select-node
                  v-if="item1.children.length > 0"
                  v-for="(item2) of item1.children"
                  :key="item2.id"
                  :value="item2.id"
                  :title="item2.name"/>
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select>
        </a-space>
        <a-space class="search-item">商品名称：
          <a-input v-model="queryParam.name" placeholder="请填写搜索商品名称" />
        </a-space>
        <a-space class="search-item">
          <a-button @click="refresh" type="primary">
            搜索
          </a-button>
        </a-space>
      </a-row>
      <a-row
        v-if="selectGoodsList.length > 0"
        type="flex"
        align="middle"
        class="img-list">
        <img
          class="selectImg"
          v-for="(goods1, index) of selectGoodsList"
          style="width: 30px;height: 30px;margin-right: 10px;"
          :key="index"
          @click="delSelect(index)"
          :src="goods1.cover_pic"
          alt=""/>
      </a-row>
      <s-table
        ref="table"
        size="default"
        row-key="id"
        :columns="columns"
        :data="loadData"
      >
        <template slot="name" slot-scope="name, goods">
          <a-row>
            <a-space>
              <img style="width: 40px;height: 40px;" :src="goods.cover_pic" alt="">
              ID{{ goods.id }}<span style="font-weight: bold;">{{ name }}</span>
            </a-space>
          </a-row>
          <!-- <a-row>
            <a-space>
              <img style="width: 60px;height: 60px;" :src="goods.cover_pic" alt="">
              <span>
                <a-row style="color: #d9534f;">商品售价：{{ goods.price }}元</a-row>
                <a-row style="color: #666666;">商品库存：{{ goods.goods_num }}</a-row>
              </span>
            </a-space>
          </a-row> -->
        </template>
        <a-space slot="action" slot-scope="text, goods">
          <a-button @click="selectGoods(goods)" size="small">
            选择
          </a-button>
        </a-space>
      </s-table>
    </a-card>
    <a-row justify="end" type="flex" style="margin-top: 15px;">
      <a-space>
        <a-button @click="onCancel">
          取消
        </a-button>
        <a-button type="primary" @click="onOk">
          确认
        </a-button>
      </a-space>
    </a-row>
  </a-modal>
</template>

<script>
import { pintuanGoods as list, pintuanCat as catListApi} from '@/api/diy'
import { STable } from '@/components'

const columns = [
  {
    title: '商品信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '40px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'SearchPintuan',
  components: {
    STable
  },
  data () {
    return {
      columns: columns,
      catList: [],
      showModal: true,
      selectGoodsList: [],
      loadData: parameter => {
        var newObj = {}
        Object.assign(newObj, parameter, this.queryParam)
        newObj.mch_id = this.mchId
        return list(newObj)
          .then(res => {
            return res.data
          })
      },
      queryParam: {
        name: '',
        cat_id: 0,
        status: -1,
        mch_id: 0
      }
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000
    },
    countNum: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: true
    },
    catId: {
      type: Number,
      default: 0
    },
    mchId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    catId: {
      deep: true,
      handler (newVal, oldVal) {
        if (newVal > 0) {
          this.queryParam.cat_id = newVal
        }
      }
    },
    mchId: {
      deep: true,
      handler (newVal, oldVal) {
        if (newVal > 0) {
          console.log('aaaaaaaaaaaaaaaaa')
          this.queryParam.mch_id = newVal
        }
      }
    }
  },
  created () {
    this.getCatList()
    console.log(this.value);
  },
  methods: {
    refresh (row) {
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    },
    onEdit (id) {
      if (id > 0) {
        this.$router.push({ name: 'GoodsEdit', query: { id: id } })
      } else {
        this.$router.push({ name: 'GoodsEdit' })
      }
    },
    /**
     * 获取分类
     */
    getCatList () {
      catListApi({ is_show: -1, mch_id: this.mchId }).then(res => {
        this.catList = res.data.list
      })
    },
    selectGoods (goods) {
      if (this.countNum > 0 && this.selectGoodsList.length >= this.countNum) {
        return false
      }
      var goodsInfo = {
        id: goods.id,
        name: goods.name,
        cover_pic: goods.cover_pic,
        original_price: goods.original_price,
        price: goods.price,
        is_negotiable: goods.is_negotiable
      }
      for (var i = 0; i < this.selectGoodsList.length; i++) {
        if (this.selectGoodsList[i].id === goodsInfo.id) {
          return false
        }
      }
      this.selectGoodsList.push(goodsInfo)
    },
    updateParam (value, type) {
      this.queryParam[type] = value
    },
    delSelect (index) {
      this.selectGoodsList.splice(index, 1)
    },
    onCancel () {
      this.$emit('input', false)
    },
    onOk () {
      this.$emit('input', false)
      this.$emit('onOk', this.selectGoodsList)
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.selectImg:hover {
  opacity: .4;
}
.img-list {
  margin-bottom: 10px;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  padding: 6px;
  position: sticky;
  top: -20px;
  z-index: 999999999;
}
</style>
